<template>
  <div class="cashier" id="cashier">
    <div class="left">
      <div
        style="
          position: absolute;
          z-index: 99999999;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.5);
        "
        v-if="!checkmodule"
      ></div>
      <div class="left-top">
        <span v-if="istop">结账清单({{ num }}件)</span>
        <span v-if="!istop">订单支付状态</span>
      </div>
      <!-- 购物车列表 -->
      <el-scrollbar v-if="istop" class="left-goods">
        <div class="item" :key="index" v-for="(item, index) in cartlist">
          <div class="top">
            <span class="name">{{ item.store_name }}</span>
            <span class="dle" @click="del(item.product_id)">删除</span>
          </div>
          <div class="bottom" v-if="discount != 0">
            <i
              ><del>￥{{ parseFloat(item.price).toFixed(2) }}</del></i
            >
            <span
              ><el-input-number
                @change="sumfu"
                v-model="item.num"
                :min="1"
                :max="99"
                size="mini"
              ></el-input-number
            ></span>
            <i>
              <del>￥{{ parseFloat(item.num * item.price).toFixed(2) }}</del>
            </i>
          </div>
          <div class="bottom">
            <span class="name" v-if="discount != 0"
              >￥{{ parseFloat(item.price * discount).toFixed(2) }}</span
            >
            <span v-if="discount == 0" class="name"
              >￥{{ parseFloat(item.price).toFixed(2) }}</span
            >
            <span v-if="discount == 0"
              ><el-input-number
                @change="sumfu"
                v-model="item.num"
                :min="1"
                :max="99"
                size="mini"
              ></el-input-number
            ></span>
            <span v-if="discount == 0" style="color: red" class="dle"
              >￥{{ parseFloat(item.num * item.price).toFixed(2) }}</span
            >
            <span v-if="discount != 0" style="color: red" class="dle"
              >￥{{
                parseFloat(item.num * item.price * discount).toFixed(2)
              }}</span
            >
          </div>
        </div>
        <div style="height: 45px" v-if="discount != 0"></div>
      </el-scrollbar>
      <!-- 商品数量 -->
      <div v-if="istop" class="left-sum">
        <div>
          <span>折扣</span><span>{{ parseFloat(discount).toFixed(2) }}</span>
        </div>
        <div>
          <span>购买数量</span><span>{{ num }}</span>
        </div>
        <div>
          <span>商品总金额</span
          ><span class="sum" style="color: #000"
            ><i v-if="discount != 0"
              ><del>￥{{ parseFloat(sum).toFixed(2) }}</del></i
            >
            <span v-if="discount == 0">￥{{ parseFloat(sum).toFixed(2) }}</span>
          </span>
        </div>
        <div v-if="discount != 0">
          <span></span
          ><span class="sum"
            >￥{{ parseFloat(sum * discount).toFixed(2) }}</span
          >
        </div>
      </div>
      <!-- 结算 -->
      <div v-if="istop" class="left-buttom">
        <el-button class="btn" @click="alldel">整单取消</el-button>
        <el-button class="btn" @click="counter">折扣</el-button>
        <el-button class="btn" type="primary" @click="settlement"
          >结算</el-button
        >
      </div>
      <div v-if="!istop" class="left-order">
        <div>
          <div>
            <i
              v-if="paid == 1"
              class="el-icon-circle-check"
              style="color: #1890ff"
            ></i>
            <i
              v-if="paid == 0"
              class="el-icon-circle-close"
              style="color: red"
            ></i>
          </div>
          <div>
            <span v-if="paid == 1">已支付</span>
            <span v-if="paid == 0">未支付</span>
          </div>
          <div>
            <el-button
              style="width: 200px"
              type="primary"
              round
              @click="istop = true"
            >
              关闭
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-if="checkmodule">
      <div class="right-top">
        <p @click="btnclassgoods(0)" :class="{ click: classgoods === 0 }">
          商品
        </p>
        <p @click="btnclassgoods(1)" :class="{ click: classgoods === 1 }">
          会员
        </p>
      </div>
      <div class="right-goods">
        <div class="goods-box" v-if="classgoods === 0">
          <div class="search">
            <div style="color: #1890ff">
              <i
                class="el-icon-back"
                v-if="tableFrom.keyword"
                @click="(tableFrom.keyword = ''), getgoods()"
                >返回</i
              >
            </div>
            <el-input
              placeholder="请输入商品名称/商品编码"
              suffix-icon="el-icon-search"
              v-model="tableFrom.keyword"
              @input="getgoods()"
              @click.stop="inputno"
            >
            </el-input>
          </div>
          <el-scrollbar class="goods-list">
            <div
              class="item"
              :key="index"
              v-for="(item, index) in tableData"
              @click="addgoods(item.product_id)"
            >
              <div class="item-left">
                <img :src="item.image" alt="" />
              </div>
              <div class="item-right">
                <div class="title">{{ item.store_name }}</div>
                <div class="body">
                  <span class="list">编号：{{ item.product_id }}</span>
                  <span class="list">库存：{{ item.stock }}</span>
                  <span class="price">￥{{ item.price }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <!-- 分类 -->
        <el-scrollbar class="class" v-if="classgoods === 0">
          <div
            @click="categoryfu(item.store_category_id)"
            :key="index"
            v-for="(item, index) in categoryList"
            :class="item.store_category_id == category ? 'category' : ''"
            class="item"
          >
            {{ item.cate_name }}
          </div>
        </el-scrollbar>
        <div class="member" v-if="classgoods === 1">
          <div class="memberdabox">
            <div class="tilex">询问客户信息查询会员</div>
            <div class="search">
              <el-input
                placeholder="请输入会员ID"
                v-model="getuid"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="btngetuid"
                ></el-button>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="right-bottom">
        <el-button class="btn" @click="guadan">挂单</el-button>
        <el-button type="info" class="btn" @click="checkmodulefu"
          >取单</el-button
        >
      </div>
    </div>
    <div class="right" v-if="!checkmodule">
      <div class="order">
        <div class="order-title">
          <div class="order-title-left">取单</div>
          <div class="order-title-right" @click="checkmodule = true">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-scrollbar class="order-goods">
          <div
            class="order-goods-item"
            :key="index"
            v-for="(item, index) in orderlist"
          >
            <div class="table">
              <p>商品名称</p>
              <p>数量</p>
              <p>商品价格</p>
            </div>
            <div class="body" :key="index1" v-for="(item1, index1) in item">
              <p>{{ item1.store_name }}</p>
              <p>{{ item1.num }}</p>
              <p>{{ item1.price }}</p>
            </div>
            <div class="btnbox">
              <el-button class="btn" @click="delorder(item)">删除</el-button
              ><el-button type="primary" class="btn" @click="qudan(item)"
                >取单</el-button
              >
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="make" v-if="isbarcode || ismember" @click="Closetoclear"></div>
    <el-drawer
      :visible.sync="ismember"
      size="50%"
      @click="Closetoclear"
      :before-close="Closetoclear"
      :modal="false"
      :show-close="false"
    >
      <div class="memberbox" v-if="ismember" @click="btn">
        <span class="membertitle" v-if="ismemberinfo">会员信息</span>
        <el-input
          class="member"
          ref="child"
          @input="inputmember"
          v-model="uid"
          placeholder="请输入会员ID"
          v-if="ismemberinfo"
        ></el-input>
        <div class="member-user">
          <div class="member-user-left">
            <el-avatar
              :size="70"
              class="member-avatar"
              icon="el-icon-user-solid"
              :src="userinfo.avatar"
            ></el-avatar>
          </div>
          <div class="member-user-right">
            <div>姓名：{{ userinfo.buyer_name || "" }}</div>
            <div>手机号码 ：{{ userinfo.phone || "" }}</div>
            <div>身份证：{{ userinfo.buyer_id_no || "" }}</div>
            <div>
              <p>
                <el-radio :disabled="isradio" v-model="radio" label="1"
                  ><span>系统收货地址</span></el-radio
                >
              </p>
              <span
                style="padding-left: 25px; color: #999999; font-size: 12px"
                >{{ this.user_addresss }}</span
              >
            </div>
            <div>
              <p>
                <el-radio :disabled="isradio" v-model="radio" label="2"
                  ><span>用户收货地址</span></el-radio
                >
              </p>
              <span
                style="padding-left: 25px; color: #999999; font-size: 12px"
                >{{ this.mer_addresss }}</span
              >
            </div>
          </div>
        </div>

        <div class="memberinfo">
          <div class="">
            <div class="memberinfolist">
              <span>折扣：</span>
              <span style="color: red">{{
                parseFloat(discount).toFixed(2)
              }}</span>
            </div>
            <div class="memberinfolist">
              <span>购买数量：</span>
              <span style="color: red">{{ num }}</span>
            </div>
            <div class="memberinfolist">
              <span>商品总金额：</span>
              <span
                v-if="discount != 0"
                style="color: red; font-size: 24px; font-width: 700"
                >￥{{ parseFloat(sum * discount).toFixed(2) }}</span
              >
              <span
                v-if="discount == 0"
                style="color: red; font-size: 24px; font-width: 700"
                >￥{{ parseFloat(sum).toFixed(2) }}</span
              >
            </div>
          </div>
        </div>
        <el-button
          v-if="ismemberinfo"
          class="turepay"
          type="primary"
          :disabled="!order_id"
          @click="turepay"
          >扫码支付</el-button
        >
        <div v-if="ispaybox" class="paybox">
          <i
            style="font-size: 25px; margin-bottom: 6px"
            class="el-icon-loading"
          ></i>
          <div>
            {{ isduringpay ? "支付中：" + Countdown : "请扫码支付" }}
          </div>
          <el-input
            class=""
            ref="child1"
            @change="inputbarcode"
            v-model="barcode"
            v-if="ispaybox && ispayinput"
          ></el-input>
        </div>
        <div v-if="ismemberinfo" class="counter-box">
          <div
            class="counter-item"
            v-for="(item, index) in figure1"
            :key="index"
            @click="membercounter(item)"
          >
            {{ item }}
          </div>
          <div class="counter-item" @click="clearmembercounte">清空</div>
          <div class="counter-item" @click="membercounter('0')">0</div>
          <div class="counter-item" @click="delmembercounte">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>
    </el-drawer>
    <div class="make" v-if="iscounter" @click="iscounter = false"></div>
    <div class="counter" :class="[iscounter ? 'donghu' : '']" v-if="iscounter">
      <div class="counter-sun">
        <div class="counter-input">
          <input
            type="text"
            placeholder="请输入折扣,0-9.9折"
            :max="10"
            :min="0"
            maxlength="3"
            v-model="discountsum"
          />
        </div>
        <div class="counter-cancel" @click="iscounter = false">取消</div>
        <div class="counter-cancel" @click="discounttrue" style="">确定</div>
      </div>
      <div class="box">
        <div
          class="counter-item"
          v-for="(item, index) in figure"
          :key="index"
          @click="countervla(item)"
        >
          {{ item }}
        </div>
        <div class="counter-item" @click="delcounte">
          <i class="el-icon-close" @click="delcounte"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  productLstApi,
  categoryListApi,
  getUser,
  addcart,
  pay,
  orderstatus,
  printer,
  mer_address,
  user_address,
} from "@/api/cashierdesk";
import { getLodop } from "@/LodopFuncs.js";
export default {
  data() {
    return {
      figure: ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0"],
      figure1: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      discount: "0",
      discountsum: "",
      discountlist: [],
      iscounter: false,
      isradio: false,
      radio: "1",
      num: 0,
      sum: 0,
      count: 0,
      classgoods: 0,
      checkmodule: true,
      category: 0,
      tableFrom: {
        page: 1,
        limit: 20,
        mer_cate_id: "",
        cate_id: "",
        keyword: "",
        type: 1,
        is_gift_bag: "",
        product_id: "",
        us_status: 1,
      },
      tableData: [],
      categoryList: [],
      cartlist: [],
      orderlist: [],
      err: "",
      hint: "",
      uid: "",
      getuid: "",
      isbarcode: false,
      barcode: "", //条码
      order_id: "",
      payorder_id: "",
      success: "",
      istop: true,
      paystatus: "",
      paid: "",
      searchgoods: "",
      ismember: false,
      ismemberinfo: false,
      ispaybox: false,
      isduringpay: false,
      ispayinput: true,
      userinfo: [], //用户信息
      Countdown: 100,
      print: "",
      printDefault: {},
      paydata: [],
      paydatalist: "",
      printlists: [],
      mer_addresss: "",
      user_addresss: "",
      intervals: '',
      hasOrder: false
    };
  },
  beforeMount() {
    this.cartlist = JSON.parse(localStorage.getItem("cartlist"));
    this.orderlist = JSON.parse(localStorage.getItem("orderlist"));
    // this.uid = localStorage.getItem("uid");
    if (this.orderlist == null) {
      this.orderlist = new Array();
    }
    if (this.cartlist == null) {
      this.cartlist = new Array();
    }
    // if (this.uid == null) {
    //   this.uid = "";
    // }
    this.getgoods();
    this.getcategoryList();
    this.sumfu();
    this.mer_address();
  },
  mounted() {
    // this.getPrintList();
  },
  beforeDestroy() {
    this.cache();
  },
  methods: {
    //获取商户默认收货地址
    mer_address: function () {
      mer_address().then((res) => {
        this.user_addresss =
          res.data.province + res.data.city + res.data.area + res.data.address;
      });
    },
    //获取用户默认收货地址
    user_address: function (id) {
      console.log(id);
      user_address(id).then((res) => {
        this.mer_addresss =
          res.data.province +
          res.data.city +
          res.data.district +
          res.data.detail;
      }).catch((err) => {
        this.mer_addresss = '';
        that.hint = err.message;
        that.open1();
      });
    },
    // 会员计算器
    membercounter(e) {
      this.uid += e;
      this.inputmember();
    },
    //清除会员ID
    clearmembercounte() {
      this.uid = "";
    },
    //del会员ID
    delmembercounte() {
      this.uid = this.uid.slice(0, -1);
      this.userinfo = [];
    },
    //提交计算器
    discounttrue() {
      if (this.discountsum < 10 && this.discountsum > 0) {
        let sum = "";
        let index = "";
        index = this.discountsum.split(".");
        index.forEach((res) => {
          sum += res;
        });
        this.discount = "0." + sum.split(",");
        this.iscounter = false;
        this.discountsum = "";
      } else {
        this.err = "请输入折扣,0-9.9折";
        this.open4();
        this.discountsum = "";
      }
    },
    //删除计算器输入
    delcounte() {
      this.discountsum = this.discountsum.slice(0, -1);
      if (this.discountsum == 0) {
        this.discountsum = "";
      }
    },
    //计算器输入
    countervla(e) {
      if (this.discountsum.length < 3) {
        this.discountsum += e;
      }
    },
    //打开计算器
    counter() {
      this.iscounter = true;
    },
    day() {},
    // 打印
    handleReview() {
      let that = this;
      this.printlists.push(this.cartlist);
      console.log(that.cartlist);
      setTimeout(function () {
        let list = "";
        that.cartlist.forEach((res) => {
          let item =
            "<gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>" +
            res.store_name +
            "</gpWord><gpTR4 Type=1><td></td><td>" +
            res.price +
            "</td><td>" +
            res.num +
            "</td><td>" +
            parseFloat(res.num * res.price).toFixed(2) +
            "</td></gpTR4>";
          list += item;
        });
        let D = "</gpWord>";
        let C = parseFloat(that.sum * that.discount - that.sum).toFixed(2);
        let B =
          "<gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>折扣减免:";
        let A = "";
        if (that.discount != 0) {
          A = B += C += D;
        } else {
          A = "";
        }
        let data =
          "<gpWord Align=1 Bold=1 Wsize=1 Hsize=1 Reverse=0 Underline=0>大湾通达</gpWord><gpBr/><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>订单号：" +
          that.paydata.order_sn +
          "</gpWord><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>购买时间：" +
          that.paydata.create_time +
          "</gpWord><gpWord Align=1 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>------------------------------------------------</gpWord><gpBr/><gpTR4 Type=1><td>商品名称</td><td>单价</td><td>数量</td><td>总价</td></gpTR4>" +
          list +
          "<gpBr/><gpWord Align=1 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>------------------------------------------------</gpWord><gpBr/><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>折扣：" +
          parseFloat(that.discount).toFixed(2) +
          "</gpWord><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>购买数量：" +
          that.num +
          "</gpWord><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>商品总金额：" +
          parseFloat(that.sum).toFixed(2) +
          "</gpWord>" +
          A +
          "<gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>购买人姓名：" +
          that.paydata.buyer_name +
          "</gpWord><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>购买人电话：" +
          that.paydata.user_phone +
          "</gpWord><gpWord Align=0 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>收货地址：" +
          that.paydata.user_address +
          "</gpWord><gpBr/><gpWord Align=1 Bold=1 Wsize=0 Hsize=0 Reverse=0 Underline=0>欢迎下次光临!</gpWord><gpCut/>";
        printer({ msgDetail: data }).then();
        that.alldel();
      }, 1000);
    },
    //关闭清除
    Closetoclear: function () {
      this.isbarcode = false;
      this.ismember = false;
      this.ispaybox = false;
      this.isradio = false;
      this.ispayinput = true;
      this.uid = "";
      this.mer_addresss = "";
      this.userinfo = new Array();
    },
    // 点击结算
    settlement: function () {
      if (this.cartlist.length != 0) {
        this.ismember = true;
        this.ismemberinfo = true;
        this.inputMessage();
        let that = this;
        setTimeout(() => {
          that.$refs.child.focus();
        }, 500);
      } else {
        this.err = "请选择商品！";
        this.open4();
      }
    },
    btn: function (e) {
      let that = this;
      setTimeout(() => {
        that.$refs.child1.focus();
      }, 500);
    },
    inputMessage: function (e) {
      let that = this;
      setTimeout(() => {
        that.$refs.child.focus();
      }, 500);
    },
    //输入会员
    inputmember: function () {
      clearInterval(this.intervals);
      this.intervals = setTimeout(() => {
        this.getUser();
      }, 1000);
    },
    //输入付款条码
    inputbarcode: function () {
      if (this.barcode.length === 18) {
        this.ispayinput = false;
        this.pay();
      }
    },
    // 查看订单状态
    orderstatus: function () {
      let that = this;
      var time = setInterval(function () {
        that.Countdown--;
        console.log(that.Countdown);
      }, 1000);
      var time1 = setInterval(function () {
        if (that.Countdown != -1) {
          orderstatus(that.payorder_id, { uid: that.uid })
            .then((res) => {
              that.isduringpay = true;
              that.paid = res.data.paid;
              if (that.Countdown == 0 || res.data.paid == 1) {
                that.handleReview();
                that.uid = "";
                clearInterval(time);
                clearInterval(time1);
                that.istop = false;
                that.isduringpay = false;
                that.ismember = false;
                that.isbarcode = false;
                that.ispaybox = false;
                that.isradio = false;
                that.ispayinput = true;
              }
            })
            .catch((err) => {
              that.alldel();
              that.uid = "";
              clearInterval(time);
              clearInterval(time1);
              that.istop = false;
              that.isduringpay = false;
              that.ismember = false;
              that.isbarcode = false;
              that.ispaybox = false;
              that.err = err.message;
              that.isradio = false;
              that.ispayinput = true;
              that.open4();
            });
        }
      }, 1000);
    },
    // 获得uid
    btngetuid: function () {
      this.uid = this.getuid;
      this.getuid = "";
    },
    // 结算
    pay: function () {
      let that = this;
      pay({
        address_type: this.radio,
        auth_code: this.barcode,
        uid: this.uid,
        order_id: this.order_id,
      })
        .then((res) => {
          this.barcode = "";
          this.order_id = "";
          this.payorder_id = res.data.result.order_id;
          this.paydata = res.data.result.orderInfo;
          if (res.data.result === "PAID") {
            console.log(43);
            that.handleReview();
            that.uid = "";
            that.istop = false;
            that.isduringpay = false;
            that.ismember = false;
            that.isbarcode = false;
            that.ispaybox = false;
            that.isradio = false;
            that.ispayinput = true;
          } else {
            that.orderstatus();
          }
        })
        .catch((err) => {
          this.barcode = "";
          this.order_id = "";
          this.err = err.message;
          this.open4();
        });
    },
    //添加购物车
    addcart: function (cartInfo) {
      let that = this;
      if (cartInfo.length) {
        let zhekou = 0;
        if (this.discount == 0) {
          zhekou = 1;
        } else {
          zhekou = this.discount;
        }
        addcart({ discount: zhekou, cartInfo })
          .then((res) => {
            that.isbarcode = true;
            that.order_id = res.data.order_id;
          })
          .catch((err) => {
            that.order_id = '';
            that.err = err.message;
            that.open4();
          });
      } else {
        that.err = "请选择需要购买的商品";
        that.open4();
      }
    },
    //确认用户信息去支付
    turepay: function () {
      if (this.userinfo.uid) {
        this.isradio = true;
        this.ismemberinfo = false;
        this.ispaybox = true;
        setTimeout(() => {
          this.$refs.child1.focus();
        }, 500);
      } else {
        this.$refs.child.focus();
        this.err = "请输入会员ID";
        this.open4();
      }
    },
    //获得用户信息
    getUser: function () {
      let that = this;
      if (this.uid == '') {
        that.userinfo = [];
        that.mer_addresss = "";
        return;
      }
      getUser({ uid: this.uid })
        .then((res) => {
          console.log(res);
          this.user_address(res.data.uid);
          that.userinfo = res.data;
          let cartInfo = [];
          for (let i = 0; i < that.cartlist.length; i++) {
            let item = {
              user_id: this.uid,
              product_id: that.cartlist[i].product_id,
              cart_num: that.cartlist[i].num,
            };
            cartInfo.push(item);
          }
          if (res.status == 200) {
            that.addcart(cartInfo);
          }
        })
        .catch((err) => {
          that.userinfo = [];
          that.mer_addresss = "";
          that.order_id = "";
          that.hint = err.message;
          that.open1();
        });
    },

    //销毁本地缓存
    cache: function () {
      localStorage.setItem("cartlist", JSON.stringify(this.cartlist));
      localStorage.setItem("orderlist", JSON.stringify(this.orderlist));
      // localStorage.setItem("uid", this.uid);
    },
    //   总金额
    sumfu: function () {
      let sum;
      this.num = 0;
      this.sum = 0;
      for (let i = 0; i < this.cartlist.length; i++) {
        sum = this.cartlist[i].num * this.cartlist[i].price;
        this.sum += sum;
        this.num += this.cartlist[i].num;
      }
    },
    //挂单
    guadan: function () {
      this.orderlist.push(this.cartlist);
      this.alldel();
    },
    //全部删除
    alldel: function () {
      this.printlists = undefined;
      this.printlists = new Array();
      this.cartlist = undefined;
      this.cartlist = new Array();
      this.userinfo = undefined;
      this.userinfo = new Array();
      this.mer_addresss = "";
      this.getgoods();
      this.sumfu();
    },
    //取单
    qudan: function (item) {
      this.cartlist = item;
      this.checkmodulefu();
      this.delorder(item);
    },
    //删除订单
    delorder: function (item) {
      let index = this.orderlist.indexOf(item);
      this.orderlist.splice(index, 1);
      this.sumfu();
    },
    //删除
    del: function (id) {
      let index = this.cartlist.findIndex((res) => res.product_id == id);
      let info = this.cartlist.filter((res1) => res1.product_id === id);
      info[0].num = 1;
      console.log(index);
      this.cartlist.splice(index, 1);
      this.sumfu();
    },
    // 添加商品
    addgoods: function (id) {
      let that = this;
      this.tableData.map((res) => {
        if (res.product_id === id) {
          let index = this.cartlist.some((res2) => res2.product_id == id);
          if (!index == true) {
            that.cartlist.push(res);
          } else {
            let info = that.cartlist.filter((res1) => res1.product_id === id);
            info[0].num++;
          }
        }
      });
      this.sumfu();
    },
    //分类
    categoryfu: function (id) {
      if (id == 0) {
        this.tableFrom.mer_cate_id = "";
        this.category = id;
      } else {
        this.category = id;
        this.tableFrom.mer_cate_id = id;
      }
      this.getgoods();
    },
    checkmodulefu: function (val) {
      if (this.orderlist.length) {
        this.checkmodule = !this.checkmodule;
      } else {
        this.err = "暂无挂单!";
        this.open4();
      }
    },
    btnclassgoods: function (val) {
      this.classgoods = val;
    },
    //获得商品
    getgoods: function () {
      productLstApi(this.tableFrom)
        .then((res) => {
          let num = { num: 1 };
          for (let i = 0; i < res.data.list.length; i++) {
            res.data.list[i].num = 1;
          }
          this.tableData = res.data.list;
        })
        .catch((err) => {});
    },
    //获得分类
    getcategoryList: function () {
      categoryListApi()
        .then((res) => {
          let item = { cate_name: "全部商品", store_category_id: 0 };
          res.data.unshift(item);
          this.categoryList = res.data;
        })
        .catch((err) => {});
    },
    open1() {
      this.$message({
        showClose: true,
        message: this.hint,
        customClass: 'message-override',

      });
    },
    open2() {
      this.$message({
        message: this.success,
        type: "success",
        customClass: 'message-override',
      });
    },
    open4() {
      this.$message({
        showClose: true,
        message: this.err,
        type: "error",
        customClass: 'message-override',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.print {
  display: none;
}

@media print {
  @page {
    margin: 0;
  }
  #print {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: pink;
    height: 100%;
    width: 178px !important;
    z-index: 999999999999999999;
  }
}
@media screen and (max-width: 99999999px) and (min-width: 1500px) {
  .goods-list .item:nth-child(3n) {
    margin-right: 0;
  }
  .item {
    width: 32%;
    margin-right: 2%;
  }
}
@media screen and (max-width: 1499px) {
  .goods-list .item:nth-child(2n) {
    margin-right: 0;
  }
  .item {
    width: 49%;
    margin-right: 2%;
  }
}
/deep/.el-drawer__wrapper {
  z-index: 10001 !important;
  widows: 50%;
}
/deep/.el-drawer {
  width: 50%;
}
.memberbox {
  z-index: 2011;
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background-color: #fff;
  .membertitle {
    margin: 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1890ff;
  }
  .member-user {
    display: flex;
    width: 100%;
    padding-top: 30px;
    border-bottom: 1px solid #e1e1e1;
    .member-user-left {
      padding-right: 30px;
    }
    .member-user-right {
      flex: 1;
      font-size: 14px;
      div {
        font-size: 14px;
        padding-bottom: 10px;
        p {
          margin-bottom: 5px;
          span {
            font-size: 15px;
          }
        }
      }
    }
  }
  .member-avatar {
    margin: 0 0 10px 0;
  }
  .memberid {
    margin: 5px 0;
  }
  .memberinfo {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
    .memberinfolist {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      font-size: 14px;
    }
  }
  .turepay {
    margin-top: 15px;
    width: 100%;
  }
  .counter-box {
    position: absolute;
    bottom: 0;
    height: 200px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    border-top: 1px solid #e1e1e1;
    padding-bottom: 10px;
  }
  .counter-item:active {
    background-color: #c9c9c9;
  }
  .counter-item {
    width: 33.3%;
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
  }
  .paybox {
    margin-top: 15px;
    text-align: center;
    overflow: hidden;
    /deep/.el-input__inner {
      position: fixed;
      z-index: -999999;
      top: -99999999999px;
    }
  }
}
.input-with-select {
  z-index: 99999999999999;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  text-align: center;
  transform: translate(-50%, -50%) !important;
  /deep/.el-input-group__append {
    top: 0;
    height: 0px !important;
  }
}
.searchgoods {
  position: absolute;
  top: 0;
}
.make {
  z-index: 10000;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
category {
  color: #1890ff;
}
.cashier {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.left {
  position: relative;
  flex-direction: column;
  margin: 15px;
  min-width: 400px;
  box-shadow: initial;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  .left-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    line-height: 48px;
    padding: 0 30px;
    justify-content: space-between;
  }
  .left-goods {
    border-top: 1px solid #e1e1e1;
    padding: 15px;
    padding-right: 30px;
    height: 470px;
    overflow: hidden;
    /deep/ {
      .el-scrollbar__bar {
        bottom: 0px;
      }
    }
    ::-webkit-scrollbar {
      height: 6px;
    }
    cursor: default;
    white-space: nowrap;
    .item {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #e1e1e1;
      .top {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 30px;
        background-color: #fff;
        .name {
          width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .dle {
          color: #1890ff;
          cursor: pointer;
        }
      }
      .bottom {
        background-color: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 35px;
        font-size: 14px;
        .el-input-number--mini {
          width: 90px;
        }
      }
    }
  }
  .left-sum {
    z-index: 999;
    position: absolute;
    bottom: 78px;
    width: 100%;
    padding: 0 15px;
    font-size: 14px;
    border-top: 1px solid #e1e1e1;
    background-color: #fff;
    > div {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      .sum {
        font-size: 18px;
        color: red;
      }
    }
  }
  .left-buttom {
    position: absolute;
    bottom: 0;
    border-top: 1px solid #e1e1e1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    .btn {
      height: 48px;
      width: 100px;
    }
  }
  .left-order {
    flex: 1;
    height: 500px;
    border-top: 1px solid #e1e1e1;
    padding: 15px;
    padding-right: 30px;
    text-align: center;
    overflow: hidden;
    > div {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      :nth-child(2) {
        margin: 10px 0;
      }
    }
    i {
      font-size: 80px;
    }
    span {
      font-weight: bold;
    }
  }
}
.right {
  margin: 15px 15px 15px 0px;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: initial;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .right-top {
    float: left;
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    margin: 5px;
    border-collapse: collapse;
    border-bottom: 1px solid #e1e1e1;
    border-collapse: collapse;
    p {
      margin: -1px;
      height: 48px;
      width: 100px;
      border: 1px solid #e1e1e1;
      border-bottom: 0;
      line-height: 48px;
      text-align: center;
      border-collapse: collapse;
    }
    :nth-child(1) {
      border-radius: 2px 0 0 0;
    }
    :nth-child(2) {
      border-radius: 0 2px 0 0;
      border-left: 0;
    }
    .click {
      border-bottom: 1px solid #ffffff;
      border-right: 1px solid #e1e1e1;
      border-left: 1px solid #e1e1e1;
      background-color: #f7f7f7;
    }
  }
  .right-goods {
    display: flex;
    justify-content: space-between;
    border-collapse: collapse;
    width: 100%;
    flex: 1;
    .goods-box {
      width: 100%;
      min-width: 580px;
      overflow: hidden;
      .search {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        height: 70px;
        line-height: 35px;
        .el-input {
          width: 50%;
        }
      }
      .goods-list {
        padding: 0 15px;
        height: 450px;
        display: flex;
        /deep/ {
          .el-scrollbar__bar {
            bottom: 0px;
          }
        }
        /deep/ {
          .el-scrollbar__view {
            display: flex;
            flex-wrap: wrap;
            bottom: 0px;
          }
        }
        ::-webkit-scrollbar {
          height: 6px;
        }
        /deep/ {
          .el-scrollbar__wrap {
            width: 100%;
          }
        }

        cursor: default;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        .item {
          display: flex;
          height: 130px;
          margin-bottom: 16px;
          padding: 8px;
          border: 1px solid #e1e1e1;
          border-radius: 5px;
          overflow: hidden;
          .item-left {
            width: 100px;
            height: 100px;
            margin-left: 5px;
            img {
              width: 100px;
              height: 100px;
            }
          }
          .item-right {
            min-width: 100px;
            position: relative;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            .title {
              line-height: 22px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .body {
              position: absolute;
              bottom: 0;
              display: flex;
              flex-direction: column;
              .list {
                font-size: 12px;
                color: #999;
                height: 18px;
                line-height: 18px;
              }
              .price {
                height: 25px;
                color: #ff3d17;
                font-size: 14px;
                line-height: 25px;
              }
            }
          }
        }
      }
    }
    .class {
      width: 200px;
      height: 520px;
      border-left: 1px solid #e1e1e1;
      .item {
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        font-size: 14px;
      }
      /deep/ {
        .el-scrollbar__bar {
          bottom: 0px;
        }
      }
      ::-webkit-scrollbar {
        height: 6px;
      }
      cursor: default;
      white-space: nowrap;
    }
    .member {
      width: 100%;
      height: 520px;
      .memberdabox {
        position: relative;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        .tilex {
          font-size: 18px;
          margin-bottom: 50px;
        }
        .search {
          display: inline-block;
          width: 450px;
          margin: 15px 0;
          /deep/.el-input-group__append {
            top: 0;
          }
        }
      }
    }
  }
  .right-bottom {
    border-top: 1px solid #e1e1e1;
    padding: 15px;
    line-height: 30px;
    .btn {
      height: 48px;
      width: 100px;
    }
    .qu {
      height: 48px;
      width: 100px;
      padding: 0 !important;
      background-color: #e1e1e1;
      border: 1px solid #c9c9c9;
      color: #555;
    }
  }
  .order {
    flex: 1;
    .order-title {
      display: flex;
      justify-content: space-between;
      padding: 15px;
    }
    .order-goods {
      flex: 1;
      height: 608px;
      border-top: 1px solid #e1e1e1;
      /deep/ {
        .el-scrollbar__bar {
          bottom: 0px;
        }
      }
      ::-webkit-scrollbar {
        height: 6px;
      }
      cursor: default;
      white-space: nowrap;
      .order-goods-item {
        padding: 20px 20px 0;
        border-bottom: 1px solid #e1e1e1;
        .table,
        .body {
          display: flex;
          font-size: 14px;
          background-color: #f7f7f7;
          border: 1px solid #e1e1e1;

          p:nth-child(1) {
            width: 60%;
            padding: 0 15px;
          }
          p:nth-child(2) {
            width: 20%;
          }
          p:nth-child(3) {
            width: 20%;
          }
        }
        .body {
          background-color: #fff;
          margin-top: -1px;
        }
        .el-table {
          border: 1px solid #e1e1e1;
          border-bottom: 0;
          border-collapse: collapse;
        }
        .btnbox {
          display: flex;
          justify-content: flex-end;
          margin: 20px 0;
          .btn {
            height: 48px;
            width: 100px;
          }
          .qu {
            height: 48px;
            width: 100px;
            padding: 0 !important;
            background-color: #e1e1e1;
            border: 1px solid #c9c9c9;
            color: #555;
          }
        }
      }
    }
  }
}
@keyframes hd {
  0% {
    transform: translate(0, 400px);
  }

  100% {
    transform: translate(0, 0);
  }
}
.donghu {
  animation-name: hd;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.counter {
  display: flex;
  flex-wrap: wrap;
  z-index: 99999999999;
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 400px;
  background-color: #f7f7f7;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .counter-sun {
    display: flex;
    width: 100%;
    height: 50px;
  }
  .counter-input {
    width: 80%;
    height: 50px;
    input {
      height: 100%;
      width: 100%;
      list-style-type: none;
      padding: 10px;
      border-radius: 0;
    }
  }

  .counter-cancel {
    width: 20%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #1890ff;
  }
  .counter-item:active {
    background-color: #c9c9c9;
  }
  .box {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .counter-item {
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    width: 33.3%;
    text-align: center;
    background-color: #fff;
    margin: 0;
  }
}
</style>
<style>
.message-override {
  z-index: 30000 !important;
}
</style>
